<template>
  <!-- 选择器远程搜索开始 -->
  <div class="m-4">
    <el-select
      v-model="selectValue"
      filterable
      remote
      reserve-keyword
      placeholder="请输入要查询的姓名"
      :remote-method="remoteMethod"
      :loading="loading"
      @change="updateChange"
    >
      <el-option v-for="item in options" :key="item._id" :value="item.name" />
    </el-select>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-button
      :icon="Search"
      style="background-color: aquamarine"
      @click="handleclick"
    >
      搜索
    </el-button>
  </div>

  <!-- 选择器远程搜索结束 -->

  <!-- 搜索按钮 -->
  <br />
  <el-button type="primary" class="button" :icon="Plus" @click="handleDiaLog">
    添加项目
  </el-button>
  <!-- 搜索按钮结束 -->

  <!-- 选择班级 下选择框 -->
  <br />
  <br />
  <span>选择班级</span>
  <el-select multiple placeholder="请选择">
    <!-- <el-option></el-option> -->
  </el-select>
  <!-- 选择班级结束 -->
  <!-- 导出表格 -->
  <el-button type="primary" plain :icon="Delete" @click="handleExportExcel">
    导出表格
  </el-button>
  <!-- 表格开始 -->
  <el-table :data="tableData" border style="width: 100%" v-loading="loading">
    <el-table-column prop="headimgurl" label="头像" width="180">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 50px"
          :src="scope.row.headimgurl"
          :zoom-rate="1.2"
          :preview-src-list="srcList"
          :initial-index="scope.$index"
          fit="cover"
        />
      </template>
    </el-table-column>

    <el-table-column prop="name" label="姓名" width="150" />
    <el-table-column prop="degree" label="学历" width="150" />
    <el-table-column prop="class" label="班级" width="150" />
    <el-table-column prop="productUrl" label="项目" width="150" />
    <el-table-column prop="cTime" label="创建时间" width="150" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" :icon="View" circle v-has:read="btns" />
        <el-button
          type="danger"
          :icon="Edit"
          circle
          @click="handleEdit(scope.row)"
          :title="title"
          v-has:edit="btns"
        />
        <el-button
          type="danger"
          :icon="Delete"
          @click="handleClick(scope.row)"
          circle
          v-has:delete="btns"
        />
      </template>
    </el-table-column>
    >
  </el-table>

  <!-- 表格结束 -->
  <!-- 分页 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :page-size="10"
    :total="pageTotal"
    style="text-align: center"
    @current-change="currentChange"
  ></el-pagination>
  <DiaLog
    :title="title"
    :getReloadList="getStuList"
    :returned="returned"
    :actionType="actionType"
  ></DiaLog>
</template>
<script>
export default {
  meta: {
    name: '项目管理',
    title: 'studentProject',
    icon: '#icon-dd'
  }
};
</script>
<script setup>
//引入dailogstore
import { useDiaLog } from '../../../../store/DiaLog';
import * as api from '../../../../api/vip';
import DiaLog from '../../../../components/DiaLog/index.vue';
import { ref } from 'vue';
import { Delete, View, Edit, Search, Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import qee from 'qf-export-excel';
//引入pinia按钮权限
import { useUser } from '../../../../store/users';
let permissionStore = useUser();
let { permission } = storeToRefs(permissionStore);
// console.log(permission);
let btns = permission.value.buttons;
console.log(btns);
let vHas = {
  mounted(el, binding) {
    console.log(binding);
    let dyHas = binding.value.includes(binding.arg);
    console.log(dyHas);
    if (!dyHas) {
      el.parentNode.removeChild(el);
    }
    // console.log(el);
  }
};

// 声明学员信息初始值
let tableData = ref([]);
const list = ref();
//关键字下拉框提示
const options = ref([]);
//搜索框文字
const selectValue = ref();
//动画开关
const loading = ref(false);
let userStore = useDiaLog();
//声明对象作为参数传递发起请求
let pageObj = ref({
  page: 1,
  count: 10,
  classes: ''
});

//声明分页的总数量
let pageTotal = ref();

//声明变量存储多个图片列表数据
const srcList = ref([]);
//封装获取学员信息的请求
let getStuList = async (params = pageObj.value) => {
  let { page, count, classes } = params;
  loading.value = true;
  try {
    let res = await api.getStuListApi(page, count, classes);

    tableData.value = res.data.data;
    srcList.value = tableData.value.map((item) => item.headimgurl);
    pageTotal.value = res.data.total;
    loading.value = false;
  } catch (e) {
    // console.log(e);
  }
};

// 调用获取学员信息的方法
getStuList();
//表格事件改变分页获取新的页面数据
let currentChange = (e) => {
  // console.log(e);
  pageObj.value.page = e;
  if (selectValue.value) {
    handleclick();
  } else {
    getStuList();
  }
};
//封装搜索学院关键词的请求
let serchStu = async (key, count, page) => {
  if (!key) {
    options.value = [];
    return;
  }
  let res = await api.serchStuApi(key, count, page);
  options.value = res.data.data;
  console.log(res);
};
//声明变量保存上一次输入的值
let lastInput = ref();
//输入事件
let remoteMethod = (key) => {
  //判断,如果输入的值有,那么把值赋值给最后一次输入值得变量
  if (key) {
    lastInput.value = key;
  }
  serchStu(key);
};
//关键字点击时发送请求获取新的数据
let updateChange = async (value) => {
  console.log(value);
  //value是选中以后的关键字 在这之后发起搜索关键字的请求
  try {
    let res = await api.serchStuApi(
      value,
      pageObj.value.count,
      pageObj.value.page
    );
    //得到请求的关键字的数据,把这次请求赋值给搜索学员,让表格内容变成当前的数据
    tableData.value = res.data.data;
    console.log(res);
  } catch (e) {}
};

//注册点击搜索事件
let handleclick = async () => {
  console.log(lastInput.value);
  //点击拿到了输入的值,赋值给select v-model的值,渲染到表格
  selectValue.value = lastInput.value;
  //发起请求,传入参数 就传lastInput
  try {
    let res = await api.serchStuApi(
      lastInput.value,
      pageObj.value.count,
      pageObj.value.page
    );
    //把表格里的值换成最后一次传入的值
    tableData.value = res.data.data;
  } catch (e) {}
};
//声明表单的标题
let title = ref('');
//点击添加项目按钮 显示表单
let handleDiaLog = () => {
  userStore.dialogFormVisible = true;
  title.value = '增加项目';
};
//声明对话框类型
let actionType = ref('add');
//声明回显
let returned = ref();
// 点击编辑图标 显示表单 替换文字
let handleEdit = (row) => {
  console.log(row);
  userStore.dialogFormVisible = true;
  title.value = '编辑项目';
  returned.value = { ...row };
  actionType.value = 'edit';
};
//注册删除事件
let handleClick = async (row) => {
  ElMessageBox.confirm('你确定要删除这条信息吗??', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      try {
        let res = await api.delStuApi(row.sId);
        //删除完成后刷新列表
        getStuList();
        // console.log(res);
      } catch (e) {}
      ElMessage({
        type: 'success',
        message: '删除成功'
      });
    })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '取消删除'
      });
    });
};
// 定义title
let titleList = [
  {
    title: '姓名',
    key: 'name'
  },
  {
    title: '班级',
    key: 'class'
  },
  {
    title: '城市',
    key: 'city'
  }
];
//定义数据源

//注册导出excel
let handleExportExcel = () => {
  qee(titleList, tableData.value, '学员数据');
};
</script>

<style scoped lang="less">
:deep(.el-image-viewer__img) {
  width: 400px;
  height: 400px;
}
.el-breadcrumb {
  margin: 10px 0;
}

.el-button--primary {
  position: absolute;
  top: 208px;
  left: 234px;
}

:deep(.el-table__cell) {
  text-align: center;
}

.el-table__header {
  width: 100%;
}
.el-input__wrapper {
  margin-right: 20px;
}
</style>
